import React, { useEffect, useRef, useState } from "react";
import styles from "./Index.module.css";
import instance from "../../api/request";
import { Tabs } from "antd-mobile";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";

function Index() {
  const [list, setList] = useState([]);
  const [plateId, setPlateId] = useState(1);
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(5);
  const [tab, setTab] = useState([]);
  const nav = useNavigate();
  const [hasMore, setHasMore] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const loadMoreRef = useRef(null);
  const gettab = () => {
    instance
      .get("/api/share/information/v1/findInformationPlateList")
      .then((res) => {
        console.log(res);
        setTab(res.data.result);
      });
  };

  const getlist = () => {
    instance
      .get("/api/share/information/v1/findInformationList", {
        params: {
          plateId: plateId,
          page: page,
          count: count,
        },
      })
      .then((res) => {
        console.log(res);
        // setList(res.data.result);
        const list = res.data.result || [];
        setList((prev) => (page === 1 ? list : [...prev, ...list]));
        if (Array.isArray(list) && list.length < count) setHasMore(false);
      })
      .finally(() => setLoadingMore(false));
  };

  useEffect(() => {
    gettab();
  }, []);

  useEffect(() => {
    getlist();
  }, [plateId, page, count]);

  //触底监听
  useEffect(() => {
    if (!loadMoreRef.current) return;
    const el = loadMoreRef.current;
    const observer = new IntersectionObserver((entries) => {
      const fints = entries[0];
      if (fints.isIntersecting && !loadingMore && hasMore) {
        setPage((p) => p + 1);
      }
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, [loadingMore, hasMore]);

  return (
    <div className={styles.zong}>
      <div className={styles.xuan}>
        <Tabs onChange={(key) => setPlateId(Number(key))}>
          {tab.map((item) => (
            <Tabs.Tab key={item.id} title={item.name} />
          ))}
        </Tabs>
      </div>
      <div className={styles.list}>
        {list.map((item) => (
          <div
            key={item.id}
            className={styles.lis1}
            onClick={() => nav(`/detail/${item.id}`)}
          >
            <img className={styles.thumb} src={item.thumbnail} alt="" />

            <div className={styles.content}>
              <div className={styles.title}>{item.title}</div>

              <div className={styles.meta}>
                <span className={styles.source}>{item.source}</span>
                <span className={styles.time}>
                  {dayjs(item.releaseTime).format("YYYY-MM-DD")}
                </span>
              </div>
            </div>
          </div>
        ))}

        <div ref={loadMoreRef} style={{ height: 1 }}>
          <div style={{ textAlign: "center", color: "#999", padding: "8px 0" }}>
            {loadingMore ? "加载中..." : hasMore ? "下拉更多" : "没有更多了"}
          </div>
          <div style={{height:72}}></div>

        </div>

        
      </div>
    </div>
  );
}

export default Index;
